<template>
  <div class="sider">
    <a-menu
        :defaultOpenKeys="['1']"
        :defaultSelectedKeys="['0_1']"
        :style="{ width: '100%', height: '100%' }"
        @menuItemClick="onClickMenuItem"
        :collapsed="collapsed"
        :class="{'expanded-menu': !collapsed}"
    >
      <a-menu-item key="0_1">
        <template #icon><icon-home /></template>
        平台数据
      </a-menu-item>
      <a-menu-item key="0_2">
        <template #icon><icon-user-group /></template>
        用户管理
      </a-menu-item>
      <a-menu-item key="0_3">
        <template #icon><icon-image /></template>
        图片管理
      </a-menu-item>
      <a-menu-item key="0_4">
        <template #icon><icon-user /></template>
        个人中心
      </a-menu-item>
    </a-menu>
  </div>
</template>

<script setup lang="ts">
import { IconHome, IconUser, IconImage, IconUserGroup } from '@arco-design/web-vue/es/icon';
import { useRouter } from 'vue-router';

defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
});

const router = useRouter();

const onClickMenuItem = (key: string) => {
  console.log('click', key);
  switch (key) {
    case '0_1':
      // 平台数据页面
      router.push('/');
      break;
    case '0_2':
      // 用户管理页面
      router.push('/user');
      break;
    case '0_3':
      // 图片管理页面
      router.push('/picture');
      break;
    case '0_4':
      // 个人中心页面
      router.push('/center');
      break;
    default:
      break;
  }
};
</script>

<style scoped>
.sider {
  height: 100%;
}

/* 增大所有菜单图标的尺寸 */
.sider :deep(.arco-icon) {
  font-size: 20px;
}

/* 未收缩状态专用样式 */
.sider :deep(.expanded-menu .arco-menu-item.arco-menu-selected) {
  background-color: #eef2fa !important;
  padding-left: 13px !important;
}

/* 未收缩状态下选中菜单项的图标高亮 */
.sider :deep(.expanded-menu .arco-menu-item.arco-menu-selected .arco-icon) {
  color: #165DFF !important;
}

/* 未收缩状态下鼠标悬停的背景 */
.sider :deep(.expanded-menu .arco-menu-item:hover) {
  background-color: #f8f9fc !important;
}

/* 修改菜单项的背景和文字颜色 */
.sider :deep(.arco-menu-item) {
  background-color: white !important;
  color: #666 !important;
}

/* 收缩状态下的样式 */
.sider :deep(.arco-menu-collapse .arco-menu-item) {
  display: flex;
  justify-content: center;
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.sider :deep(.arco-menu-collapse .arco-icon) {
  margin: 0;
  color: #86909c;
}

/* 收缩状态下选中项的图标高亮 */
.sider :deep(.arco-menu-collapse .arco-menu-item.arco-menu-selected) {
  background-color: transparent !important;
}

.sider :deep(.arco-menu-collapse .arco-menu-item.arco-menu-selected .arco-icon) {
  color: #165DFF !important;
}

/* 收缩状态下悬停时图标高亮 */
.sider :deep(.arco-menu-collapse .arco-menu-item:hover) {
  background-color: transparent !important;
}

.sider :deep(.arco-menu-collapse .arco-menu-item:hover .arco-icon) {
  color: #165DFF !important;
}
</style>